<!DOCTYPE html>
<!-- saved from url=(0036)http://sinooceanlas.com/cate/10.html -->
<html lang="en" style="font-size: 40px;" >

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>登录</title>
	<meta name="keywords" content="河北省企业投资理财协会">
	<meta name="description"
		content="河北省企业投资理财协会">

	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">

	<meta name="format-detection" content="telephone=no">

	<meta name="apple-mobile-web-app-capable" content="yes">

	<meta name="apple-mobile-web-app-status-bar-style" content="black">

	<meta name="referrer" content="never">

	<link rel="stylesheet" href="./comment/layui.css">

	<link rel="stylesheet" type="text/css" media="screen and (min-width:320px) and (max-width:760px)"
		href="./comment/phone.css">

	<link rel="stylesheet" type="text/css" media="screen and (min-width:760px) and (max-width:3600px)"
		href="./comment/pc.css">

	<link rel="stylesheet" type="text/css" href="./comment/reset.css">

	<link rel="stylesheet" type="text/css" href="./comment/animate.css">

	<link rel="stylesheet" type="text/css" href="./comment/swiper.min.css">

	<script type="text/javascript" src="./comment/rem.js"></script>


	<link rel="stylesheet" href="./comment/layer.css" id="layuicss-layer">
	<script src="./comment/js-sdk-pro.min.js"></script>
</head>

<body style="font-size: 12px;">
	<div id="appel">
		<my-header></my-header>
		<!-- 公共导航 end -->
		<div style="margin-top: 95px;"  class="com_one">
			<div >
				<div  class="login-title wow bounceInDown com_one_t" style="visibility: visible; animation-name: bounceInDown;">
					<div class="login-type">
						<p>登录</p>
						<span></span>
					</div>
				</div>
			</div>
			<!-- 中部内容 end -->
			<!-- 公司注册 -->
			<div  style="display: flex;justify-content: center;" class="com_one_b">
				<div class="wow bounceInLeft com_one_b_l" style="visibility: visible; animation-name: bounceInLeft;">
					<form class="info_tj">
						<div class="com_one_b_l_li">
							<p><span>*</span>手机号</p>
							<span class="code-span" style="display: flex; border: none;align-items: center;">
								<div>
									<input v-model="phone" type="number" name="tel" @blur="validatePhone" placeholder="请输入电话号码">
								</div>
								<button 
								type="button" 
								class="code-bt"
								:disabled="countdown > 0 || !isPhoneValid"
								@click="sendCode"
								>
								{{ countdown > 0 ? `${countdown}s后重试` : '发送验证码' }}
								</button>
								<!-- <span @click="" style="width: 100px;top: 0;" class="code-bt tj_btn">验证码</span> -->
							</span>
						</div>
						<div class="com_one_b_l_li">
							<p><span>*</span>验证码</p>
							<div style="width: calc(100% - 100);">
								<input v-model="captcha" type="number" name="tel" placeholder="请输入验证码">
							</div>
						</div>
						<div @click="submit" class="com_one_b_l_f tj_btn">提交</div>
						<div class="resgin-text">没有账号？<a href="./resgin.html">去注册>></a></div>
					</form>
				</div>
			</div>
		</div>
		<!-- 公共底部 go -->
		<my-footer></my-footer>
	</div>
	<!-- 公共导航 go -->
	<script type="text/javascript" src="./comment/jquery-2.1.4.min.js"></script>
	<script type="text/javascript" src="./comment/layer.js"></script>
	<!-- <script type="text/javascript">

		$('.tj_btn').on("click", function () {
			console.log('dsd')
			var index = layer.load(2);
			var data = $(".info_tj input,.info_tj select,.info_tj textarea,.info_tj radio").serialize();
			$.ajax({
				type: 'post',
				url: "/liuyan",
				data: data,
				dataType: 'json',
				success: function (res) {
					if (res.result == 1) {
						layer.msg(res.msg, { icon: 1 });
						setTimeout(function () {
							window.location.reload();
						}, 2000);
					} else {
						layer.close(index);
						layer.msg(res.msg, { icon: 2 });
					}
				}
			})
		})
	</script> -->
	<script src="./js/vue.js"></script>
	<script src="js/comment.js"></script>
	<script>
		var app = new Vue({
			el: '#appel',
			data: {
				phone: '',
				captcha: '',
				phoneError: '',
				countdown: 0,
				timer: null
			},
			computed: {
				isPhoneValid() {
					return /^1[3-9]\d{9}$/.test(this.phone)
				},
				isFormValid() {
					return this.isPhoneValid && this.code.length === 6
				}
			},
			mounted(){
				// localStorage.setItem('userinfo',JSON.stringify({
				// 	"id": 2,
				// 	"username": "",
				// 	"nickname": "",
				// 	"mobile": "18610659529",
				// 	"avatar": "",
				// 	"score": 0,
				// 	"token": "ad530953-c86a-4903-940c-d3a2795e007d",
				// 	"user_id": 2,
				// 	"createtime": 1750669060,
				// 	"expiretime": 1753261060,
				// 	"expires_in": 2592000
				// }))
				//已登录的跳转到首页
				
				document.getElementById('login').classList.add('gg_nav_r_r_ac')
				// document.getElementById('login').style.color = '#cb2424'
				
				let userinfoStr = localStorage.getItem('userinfo')
				if(userinfoStr!=='undefined'&&!userinfoStr&&userinfoStr!=null) { window.location.href = './index.html'}
				
			},
			methods:{
				validatePhone() {
					if (!this.phone) {
						layer.msg('请输入手机号');
					} else if (!this.isPhoneValid) {
						layer.msg('手机号格式不正确');
					} 
				},
				sendCode() {
					if (!this.isPhoneValid) return
					// 模拟发送验证码API
					var indexlayer = layer.load(2);
					let that = this
					let params = {
						mobile:this.phone,
						event:'login2'
					}
					$.ajax({
						type: 'post',
						url: gloabApi + "/sms/send",
						data: params,
						dataType: 'json',
						success: function (res) {
							layer.msg(res.msg);
							if (res.code == 1) {
								console.log(`验证码已发送至 ${that.phone}`)
								// 开始倒计时
								that.countdown = 60
								that.timer = setInterval(() => {
									if (that.countdown <= 0) {
									clearInterval(that.timer)
									return
									}
									that.countdown--
								}, 1000)
							} 
							layer.close(indexlayer);
							
						},
						error:function(res){
							layer.close(indexlayer);
							layer.msg(res.responseJSON.msg);
						}
					})
					
				},
				submit(type){
					if(!this.phone){
						layer.msg('请输入手机号');
						return
					}else if(!this.isPhoneValid){
						layer.msg('手机号格式不正确');
						return
					}else if(!this.captcha){
						layer.msg('请输入验证码');
						return
					}
					var indexlayer = layer.load(2);
					let that = this
					let params = {
						mobile:this.phone,
						captcha:this.captcha
					}
					$.ajax({
						type: 'post',
						url: gloabApi + "/user/login2",
						data: params,
						dataType: 'json',
						success: function (res) {
							console.log(res)
							layer.msg(res.msg);

							if (res.code == 1) {
								setTimeout(function () {
									localStorage.setItem('userinfo',JSON.stringify(res.data.userinfo))
									window.location.href='./index.html';
									// javascript:history.back(-1);
								}, 2000);
							} 
							layer.close(indexlayer);
							
						},
						error:function(res){
							console.log(res)
							layer.close(indexlayer);
							layer.msg(res.responseJSON.msg);
						}
					})
				},
			}
		})
	</script>
	<script src="./js/login.js"></script>
	<script type="text/javascript" src="./comment/index.js"></script>
	<script type="text/javascript" src="./comment/wow.min.js"></script>
</body>

</html>

<style>
	.login-title {
		display: flex;
		justify-content: center;
	}

	.login-type {
		margin-right: 20px;
	}
	.resgin-text{
		float: right;
		display: inline-block;
		margin-top: 10px;
		a{
			color: blue;
		}
	}
	.code-bt{
		width: 100px;
        height: 46px;
		margin-left: 10px;
        border-radius: 50px;
        background: #cb2424;
        text-align: center;
        line-height: 46px;
        color: #fff;
        font-size: 14px;
        transition: 0.3s;
        cursor: pointer;
		border: none;
	}
	.gg_nav_r_r_ac{
		color: #cb2424;
	}
</style>